<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>大大怪的舰盟</title>
	<link rel="icon" href="./static/v4/images/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="./static/v4/css/public.css">
	<link rel="stylesheet" href="./static/v4/css/index.css">
	<script src="./static/v4/js/jquery.min.js"></script>
</head>
<body>
	<div class="nav">
		<div class="nav_con">
			<img class="logo" src="./static/v4/images/logo.png" width="10%"/>
			<img class="logo_infro" src="./static/v4/images/logo_infro.png" width="15%"/>
			<ul class="nav_ul">
				<li class="nav_li"><a href="index.html" class="active_hover">首页</a><div></div></li>
				<li class="nav_li"><a href="about.html">关于舰盟</a><div></div></li>
				<li class="nav_li"><a href="game.html">游戏机制</a><div></div></li>
				<li class="li_ep">舰船介绍<div class="li_list"><a href="join.html">水面舰船</a></div><div class="li_list"><a href="contact.html">航母</a></div>
				</li>
				<li class="nav_li"><a href="work.html">游戏术语</a><div></div></li>
				<li class="nav_li"><a href="../319寝室.html">寝室主页</a><div></div></li>
				<li class="nav_li"><a href="http://lohax.gitee.io/dorm319">寝室主页</a><div></div></li>
			</ul>
		</div>
	</div>
	<div class="lunbanner">
		<a class="lunbo_a" href="">
			<div class="lunbo">
			</div>
		</a>
		<div class="lun_list">
			<ul>
				<li class="foucus_list"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
	<div class="lun_nav">
		<ul>
			<a class="a1" href="game.html">
			<li>
				<div class="lun_nav_title">战舰联盟</div>
				<div class="lun_nav_infro">给你带来<br>3D、真实、公平、多人海战</div>
			</li>
			</a>
			<a class="a2" href="">
			<li>
				<div class="lun_nav_title">多人竞技</div>
				<div class="lun_nav_infro">团队合作 走向胜利<br>再现大炮巨舰的辉煌</div>
			</li>
			</a>
			<a class="a3" href="">
			<li>
				<div class="lun_nav_title">健康游戏</div>
				<div class="lun_nav_infro">合理分配游戏时间<br>获得最佳游戏体验！</div>
			</li>
			</a>
		</ul>
	</div>
	<audio controls="controls" loop=-1 autoplay=1 class="guding">
  	 	 <source src="static/v4/images/There's a Light - We Choose To Go To The Moon.mp3" type="audio/mp3" />
	</audio>
	
<script>
	$(function() {
		function play() {
			this.a = -1;
			this.url = ["banner1.jpg","banner2.jpg","banner3.jpg","banner4.jpg"];
			this.aurl = ["","","",""];
		};
		play.prototype = {
			Lun:function() {
				$(".lunbanner .lunbo_a").attr("href",Play.aurl[Play.a]);
				$(".lunbanner .lunbo").css({"background":"url(./static/v4/images/"+Play.url[Play.a]+") no-repeat center"},"backgroundSize","auto 100%");
				if(Play.a > 2) {
					Play.a = -1;
				}
				Play.a++;
				$(".lun_list ul li").removeClass("foucus_list");
				$(".lun_list ul li").eq(Play.a-1).addClass("foucus_list");

				// console.log(Play.a);
			},
			Inval:function() {
				setInterval(Play.Lun(),2000);
			},
			Click:function() {
				$(".lun_list ul li").click(function() {
					console.log($(this).index());
					$(".lun_list ul li").removeClass("foucus_list");
					$(".lun_list ul li").eq($(this).index()).addClass("foucus_list");
					Play.a = $(this).index();
					$(".lunbo").css({"background":"url(./static/v4/images/"+Play.url[Play.a]+") no-repeat center"},"backgroundSize","100%");
					$(".lunbanner .lunbo_a").attr("href",Play.aurl[Play.a]);

				});
			},
			NavHover:function() {
				$(".nav_li").hover(function() {
					$(this).find('div').stop().animate({"width":"100%"},300);
				},function() {
					$(this).find('div').stop().animate({"width":"0px"},200);
				});
			},
			Video:function(a,b) {
				$(a).click(function() {
					console.log($(this).find("video"));
					$(b).fadeIn();
					$(this).parent().parent().find("video")[0].play();
				});
			}
		}
		var Play = new play()
		Play.Lun();
		Play.Inval();
		setInterval(Play.Inval,5000);
		Play.Click();
		Play.NavHover();
		Play.Video(".video_play2",".play_video2");
		Play.Video(".video_play",".play_video");
	})
</script>